<template>
	<view>
		<div class="header">
			<text class="broker">宏烨经纪人</text>
			<dl class="user">
				<dt @click="goto_Login"><img class="sculpture" src="../../static/头像.jpg" alt=""></dt>
				<dd>王小明</dd>
			</dl>
		</div>
		<view class="house">
			<dl class="house_item" @click="goto_newHouse">
				<dt>188</dt>
				<dd>新房</dd>
			</dl>
			<dl class="house_item" @click="goto_oldHouse">
				<dt>188</dt>
				<dd>二手房</dd>
			</dl>

			<dl class="house_item" @click="goto_hireHouse">
				<dt>188</dt>
				<dd>出租房</dd>
			</dl>
		</view>
		<div class="main">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex" @click="click">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="30"></u-icon>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				name: 'chat',
				title: '消息'
			},
			{
				name: 'home',
				title: '求租'
			},
			{
				name: 'home',
				title: '求购'
			},
			{
				name: 'star',
				title: '楼市圈'
			},
			{
				name: 'play-right-fill',
				title: '直播'
			},
			{
				name: 'home-fill',
				title: '团购'
			},
			{
				name: 'home-fill',
				title: '排行榜'
			},
			{
				name: 'thumb-down-fill',
				title: '战绩'
			},
			],
		}
	},
	onLoad() {

	},
	methods: {
		click(name) {
			console.log(name);
			switch (name + 1) {
				case 1:
					uni.navigateTo({
						url: '/pages/message/message'
					})
					break
				case 2:
					uni.navigateTo({
						url: '/pages/seeking_rent/seeking_rent'
					})
					break
				case 3:
					uni.navigateTo({
						url: '/pages/want_buy/want_buy'
					})
					break
				case 4:
					uni.navigateTo({
						url: '/pages/circle/circle'
					})
					break
				case 5:
					uni.navigateTo({
						url: '/pages/live/live'
					})
					break
				case 6:
					uni.navigateTo({
						url: '/pages/group/group'
					})
					break
				case 7:
					uni.navigateTo({
						url: '/pages/charts/charts'
					})
					break
				case 8:
					uni.navigateTo({
						url: '/pages/sellers_record/sellers_record'
					})
					break
				default: return null
			}
		},
		goto_newHouse() {
			uni.navigateTo({
				url: '/pages/new_house/new_house'
			})
		},
		goto_oldHouse() {
			uni.navigateTo({
				url: '/pages/old_house/old_house'
			})
		},
		goto_hireHouse() {
			uni.navigateTo({
				url: '/pages/hire_house/hire_house'
			})
		},
		goto_Login() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
}
</script>

<style lang="scss">
.header {
	width: 100vw;
	height: 35vh;
	background: #1b89f7;
	position: relative;

	.broker {
		line-height: 160rpx;
		padding-left: 30rpx;
		font-size: 40rpx;
		color: #fff;
	}

	.user {
		text-align: center;

		.sculpture {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		dd {
			color: #fff;
			margin-top: 10rpx;
		}
	}
}

.house {
	width: 90vw;
	height: 150rpx;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 20rpx;
	position: absolute;
	left: 35rpx;
	top: 400rpx;
	display: flex;
	justify-content: space-around;

	.house_item {
		width: 200rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;

		dt {
			font-size: 46rpx;
			color: #1b89f7;
		}

		dd {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.main {
	width: 100vw;
	height: calc(70vh - 150rpx);
	margin-top: 150rpx;

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
}
</style>
